<template>
  <div class="box">
    <header class="header home">
    <van-nav-bar @click-left="$router.push('/search')">
      <template #left>
        <van-button size="small" icon="search" round color="#ff0f0f" plain >阿迪达斯</van-button>
       </template>
       <template #right>
        <van-button color="#ff0f0f" size="small" type="default" plain>登录/注册</van-button>
       </template>
     </van-nav-bar>
    </header>
    <div class="content" @scroll="onScroll($event)" ref="cont">
    <van-swipe class="my-swipe" :autoplay="3000">
      <van-swipe-item v-for="val in bannerList" :key="val.text">
        <img :src="val.img" width="100%"/>
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="5">
       <van-grid-item v-for="(item, idx) in iconArr" :key="idx">
          <van-image :src="item" fit="cover" width="100%" height="100%"/>
        </van-grid-item>
    </van-grid>
    <van-grid :column-num="2" :gutter="10">
      <van-grid-item class="card" v-for="item in proList" :key="item.proId" @click="fn(item.proId)">
         <van-image width="100%" :src="item.proImg" />
         <template>
           <div class="card">
            <h6>{{item.proName}}</h6>
            <h4>￥：{{item.price}}</h4>
            <div class="price">
              <p></p>
              ￥：{{item.price}}
            </div>
           </div>
        </template>
     </van-grid-item>
    </van-grid>
    <div class="backTop" v-show="flag" @click="toTop">
      <img src="https://kaola-haitao.oss.kaolacdn.com/a02afcdf-2e40-4c26-821b-82e4f0eeb411T2008202136_180_180.png" />
      <p>回到顶部</p>
    </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Button, Icon, Swipe, SwipeItem, Lazyload, Grid, GridItem, Image as VanImage, Card } from 'vant'
import { getBanner, getPro } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Button)
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(VanImage)
Vue.use(Card)

export default {
  data: function () {
    return {
      bannerList: [],
      navList: [],
      iconArr: ['https://kaola-haitao.oss.kaolacdn.com/be97e628-df3a-4b31-82ee-edf3686883d2T1907021531_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95/ignore-error,1', 'https://kaola-haitao.oss.kaolacdn.com/5ee97ce7-9c93-4f79-8ca5-1a1de0cc85afT1907021609_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95/ignore-error,1', 'https://kaola-haitao.oss.kaolacdn.com/7309e72f-1c23-424a-a220-91badfa2f49eT1907021955_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95/ignore-error,1', 'https://kaola-haitao.oss.kaolacdn.com/f59ffba8-c2ad-457c-9070-7f4a8e5b83b7T1907021534_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95/ignore-error,1', 'https://kaola-haitao.oss.kaolacdn.com/ba7064d2-37e7-4505-b3fd-93602df85b25T1902210142_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95/ignore-error,1', 'https://kaola-haitao.oss.kaolacdn.com/eb5afb31-3c18-4331-b5bb-f03b4b04040aT1911061954_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95/ignore-error,1', 'https://kaola-haitao.oss.kaolacdn.com/038bb478-de11-4335-8bba-452f1762c0bbT2003271652_192_220.jpg?x-oss-process=image/resize,w_192,h_220/quality,q_95/format,webp/ignore-error,1', 'https://kaola-haitao.oss.kaolacdn.com/1914d008-312b-4410-a917-f6413fe84566T19062601008_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95/ignore-error,1', 'https://kaola-haitao.oss.kaolacdn.com/fee4bf4d-1a1a-4ff6-95e1-7cfd497cb3afT1907111605_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95/ignore-error,1', 'https://kaola-haitao.oss.kaolacdn.com/7b848599-d340-4c12-8912-7618f492b8e7T19010151358_192_220.png?x-oss-process=image/resize,w_192,h_220/quality,q_95/ignore-error,1'],
      proList: [],
      flag: false
    }
  },
  methods: {
    onClickLeft () {
    },
    onClickRight () {
    },
    onScroll (event) {
      // console.log(event.target.scrollTop)
      if (event.target.scrollTop > 500) {
        this.flag = true
      } else {
        this.flag = false
      }
    },
    toTop () {
      this.$refs.cont.scrollTop = 0
    },
    fn (proId) {
      this.$router.push('/detail/' + proId)
    }
  },
  created () {
    getBanner().then(res => {
      this.bannerList = res.data.data
      // console.log(this.bannerList)
    })
    getPro().then(res => {
      this.proList = res.data.data
    })
  }
}
</script>
<style lang="scss">
 .home {
   .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
      height:2.25rem;
    }
    .van-button--round{
      width:2.3rem;
      border: 2px solid red;
    }
    .card{
      text-align: left;
      .price{
        width:1.3rem;
        background: #ffe7c5;
        align-items: right;
        p{
          display: inline-block;
          line-height: 16px;
          width:.6rem;
          height:.16rem;
          background: url("https://kaola-haitao.oss.kaolacdn.com/687b40ec-1d6c-4ca5-b8dd-a1983f9cbdfd.png");
          background-size: .6rem 100%;
        }
      }
      h6{
       margin-top:.05rem;
      }
      h4{
        color: red;
      }
    }
    .backTop{
      height: .6rem;
      width: .6rem;
      border: 1px solid #E8ECF4;
      border-radius: 4px;
      position: fixed;
      bottom:1rem;
      right:.2rem;
      text-align: center;
      img{
        height:.5rem;
        width:.5rem;
      }
      p{
        margin-top:-.1rem;
        font-size: .1rem;
        color: red;
        display: none;
      }
    }
 }
</style>
